#include("./_inc/_layout.html")
#@layout("排行榜",null,null,"jie")
#define content()
#usersRanking()
#include("./_inc/_ranklistnavigation.html",cid='')
<div class="dl_rank clearfix">
<div class="dl_ranking">
    <div class="rank_title rank_intel">
        <span>用户积分</span>
        <em>周排行</em></div>
    <div class="rank_item">
        <span>排名</span>
        <span>用户</span>
        <span>积分</span>
        <span>荣誉</span>
        <!--<em>用户</em>-->
        <!--<label>增长积分</label>--></div>


    <ul class="rank_list">
        #for(user : users)
        #if(((users.indexOf(user))+1)==1)
        <li class="topRank">
        <label><img src="/static/images/right/VIP0.png"></label>
        #else if(((users.indexOf(user))+1)==2)
        <li class="topRank">
        <label><img src="/static/images/right/VIP1.png"></label>
        #else if(((users.indexOf(user))+1)==3)
        <li class="topRank">
        <label><img src="/static/images/right/VIP2.png"></label>
        #else
        <li class="lastRank">
        <label><b>#((users.indexOf(user))+1)</b></label>
        #end
            <a><span>#(user.nickname)</span>&nbsp;&nbsp;</a>
            <a><span>#(user.point)</span>&nbsp;&nbsp;</a>
           #if(user.point >= 10000)
             <a><span>传说</span>&nbsp;&nbsp;</a>
           #else if(user.point>8000 && user.point<10000)
                <a><span>唠叨</span>&nbsp;&nbsp;</a>
        #else if(user.point>6000 && user.point<8000)
        <a><span>活跃</span>&nbsp;&nbsp;</a>
        #else if(user.point>4000 && user.point<6000)
        <a><span>吐槽</span>&nbsp;&nbsp;</a>
        #else if(user.point>2000 && user.point<4000)
        <a><span>冒泡</span>&nbsp;&nbsp;</a>
            #else
        <a><span>潜水</span>&nbsp;&nbsp;</a>
            </li>
            #end
        #end

    </ul>
</div>
</div>
#end
#define script()
#end
#end
<style>
    .dl_rank {
        width: 1170px;
        margin: 0px auto;
    }
    .dl_rank, .rank_bg {
        background: #fff;
    }
    .clearfix:before, .clearfix:after {
        display: table;
        content: " ";
    }
    .clearfix:after {
        display: block;
        width: 0;
        height: 0;
        content: ".";
        clear: both;
        visibility: hidden;
    }
    .clearfix:after {
        clear: both;
    }
    .dl_rank .dl_ranking {
        float: left;
        width: 100%;
        margin-right: 75px;
    }
    .rank_intel {
        background-image: linear-gradient(-180deg,#0086cc 1%,#0086cc 99%);
    }

    .rank_title {
        height: 35px;
        line-height: 35px;
        text-align: center;
        font-size: 0;
        color: #fff;
        border-radius: 2px;
    }
    .rank_title span {
        margin-right: 15px;
    }
    .rank_title em, .rank_title span {
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        font-weight: 700;
    }
    .iconfont, em, i {
        font-style: normal;
    }
    .rank_item {
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 0;
    }
    .rank_item span {
        width: 25%;
    }
    .rank_item em, .rank_item label, .rank_item span {
        display: inline-block;
        vertical-align: middle;
        font-size: 12px;
        color: #9b9b9b;
    }
    .rank_item em {
        width: 85%;
    }
    dd, dl, dt, li, ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .rank_list .topRank {
        height: 54px;
        line-height: 54px;
    }
    .rank_list li {
        background: #F7F8F9;
        height: 44px;
        font-size: 0;
        margin-bottom: 1px;
        line-height: 44px;
    }
    .rank_list .topRank label {
        padding-left: 0;
        width: 25%;
        text-align: center;
    }
    .rank_list .topRank a {
        padding-left: 0;
        width: 25%;
        text-align: center;
    }
   /* .rank_list .topRank lable span {
        padding-left: 0;
        width: 33%;
    }*/
    .rank_list li a, .rank_list li label, .rank_list li span {
        margin-bottom: 0;
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }
    dd, dl, dt, label {
        font-weight: 400;
    }
    .rank_list .topRank label img {
        width: 48px;
        height: 38px;
    }
    img {
        border: none;
    }
    .rank_list li a {
        width: 33%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .btn:focus, .btn:hover, a, a:active, a:hover, avisited {
        color: #333;
        text-decoration: none;
    }
    .rank_list li a, .rank_list li label, .rank_list li span {
        margin-bottom: 0;
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
    }
    .rank_list .lastRank label {
        font-size: 24px;
        /*color: #9b9b9b;*/
        font-weight: 700;
        text-align: center;
        width: 25%;
    }
    .rank_list .lastRank a {
        font-size: 24px;
        color: #9b9b9b;
        font-weight: 700;
        text-align: center;
        width: 25%;
    }
     .rank_list .lastRank span {
        line-height: 44px;
        text-align: center;
    }
    .lastRank b:nth-child(1) {
        width: 15%;
        background: #d9d9d9;
        display: inline-block;
    }
</style>